<template>
  <el-dialog :title="title" :visible="showDialog" @close="closeDialog">
    <el-form
      ref="addForm"
      :rules="addFormRules"
      :model="addForm"
      label-width="150px"
    >
      <el-form-item label="企业名称" prop="shortName">
        <el-input v-model="addForm.shortName" />
      </el-form-item>
      <el-form-item label="所属公司" prop="company">
        <el-input v-model="addForm.company" />
      </el-form-item>
      <!-- https://www.tianyancha.com （在此可查询所属公司全称及简称） -->
      <el-form-item label="">
        <span>https://www.tianyancha.com （在此可查询所属公司全称及简称）</span>
      </el-form-item>
      <el-form-item v-model="addForm.city" prop="city" label="城市地区">
        <el-select
          v-model="addForm.city"
          placeholder="请选择"
          style="margin-right: 10px"
        >
          <el-option label="北京" value="北京" />
          <el-option label="济南" value="济南" />
        </el-select>
      </el-form-item>
      <el-form-item label="方向(企业标签)" prop="tags">
        <el-input v-model="addForm.tags" />
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input v-model="addForm.remarks" type="textarea" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="submitNewUser"> 确 定 </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getCompanyInfoApi, updateCompanyInfoApi } from '@/api/company'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // 假数据
      a: '',
      addForm: {
        shortName: '',
        company: '',
        city: '',
        tags: '',
        remarks: '',
        isFamous: true,
        province: '2'
      },
      addFormRules: {
        shortName: [
          {
            required: true,
            message: '请输入',
            trigger: ['blur', 'change']
          }
        ],
        company: [
          {
            required: true,
            message: '请输入',
            trigger: ['blur', 'change']
          }
        ],
        province: [
          {
            required: true,
            message: '请输入',
            trigger: ['blur', 'change']
          }
        ],
        city: [
          {
            required: true,
            message: '请输入',
            trigger: ['blur', 'change']
          }
        ],
        tags: [
          {
            required: true,
            message: '请输入',
            trigger: ['blur', 'change']
          }
        ],
        remarks: [
          {
            required: true,
            message: '请输入',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  methods: {
    // 关闭弹层
    closeDialog() {
      this.$refs.addForm.resetFields()
      this.addForm = {
        shortName: '',
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: ''
      }
      this.$emit('update:showDialog', false)
    },
    // 获取用户详情
    async getCompanyInfo(id) {
      const res = await getCompanyInfoApi(id)
      this.addForm = res.data
    },
    // 修改用户信息
    async submitNewUser() {
      if (this.addForm.isFamous === 1) {
        this.addForm.isFamous = true
      } else {
        this.addForm.isFamous = false
      }
      console.log(this.addForm)
      await updateCompanyInfoApi(this.addForm)
      this.$message.success('更新成功')
      this.closeDialog()
      this.$emit('getComList')
    }
  }
}
</script>

<style scoped lang="scss"></style>
